<template>
  <h1>计算属性联系：</h1>
  姓：<input type="text" v-model="person.firstName" />
  <br />
  名：<input type="text" v-model="person.lastName" />
  <br />
  计算属性值：
  <input type="text" v-model="person.fullName" />
</template>

<script>
import { reactive, computed } from "vue";

export default {
  setup() {
    let person = reactive({
      firstName: "马",
      lastName: "林",
    });

    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const arr = value.split("-");
        person.firstName = arr[0];
        person.lastName = arr[1];
      },
    });

    // 计算属性为只读的
    // person.fullName = computed(() => {
    //   return person.firstName + "-" + person.lastName;
    // });

    return {
      person,
    };
  },
};
</script>
